<extend name="Base/common"/>
<block name="body">
    <div class="apply container" id="zj-app">
        <h2 class="text-center">
            <eq name="_user.u_type" value="1">
                个人团体报名
                <else/>
                机构报名
            </eq>
        </h2>
        <h4>
            <strong style="color: red;">
                注意：
                本次比赛团队最少人数：{$group_auth.min_count}
                本次比赛团队最多人数：{$group_auth.max_count}
            </strong>
        </h4>
        <div class="col-md-12">
            <table class="table table-hover">
                <tr>
                    <td>项目名称：</td>
                    <td>{$_game.g_name}</td>
                </tr>
                <tr>
                    <td>最小年龄：</td>
                    <td>{$_game.min_age}岁</td>
                </tr>
                <tr>
                    <td>最大年龄：</td>
                    <td>{$_game.max_age}岁</td>
                </tr>
                <tr>
                    <td>参赛组别：</td>
                    <td>{$group_auth.name}</td>
                </tr>
                <tr>
                    <td>参赛性别：</td>
                    <td>
                        <eq name="_game.g_sex" value="0">不限制</eq>
                        <eq name="_game.g_sex" value="1">男生</eq>
                        <eq name="_game.g_sex" value="2">女生</eq>
                    </td>
                </tr>
                <tr>
                    <td>比赛描述：</td>
                    <td>{$_game.g_info}</td>
                </tr>
            </table>
        </div>

        <form id="apply-form" method="post" action="">
            <table class="table apply-table">
                <tr style="background-color: #F2F3F7;">
                    <th>UID</th>
                    <th>身份证号</th>
                    <th>性别</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
                <tr v-for="u in users">
                    <input type="hidden" name="id" class="form-control" v-model="u.u_id"/>
                    <td>
                        <input type="text"
                               class="form-control" v-model="u.u_id" readonly="readonly"/></td>
                    <td>
                        <input type="text" name="u_pid"
                               class="form-control" v-model="u.u_pid" :placeholder="tip" readonly="readonly"/>
                    </td>
                    <td>
                        <input type="text"
                               class="form-control" v-model="u.u_sex" readonly="readonly"/>
                    </td>
                    <td>
                        <input type="text" v-model="u.u_name" class="form-control" readonly="readonly"/>
                    </td>
                    <td>
                        <input type="text" v-model="u.u_age" class="form-control" readonly="readonly"/>
                    </td>
                    <td>
                        <span class="btn btn-danger" @click="removeRow(u.u_id)">X</span>
                    </td>
                </tr>
            </table>
            <div class="center-block">
                <div class="row">
                    <div class="col-md-offset-3 col-md-6 form-inline">
                        <div class="form-group">
                            <label>输入身份证号添加成员:</label>
                            <input class="form-control" type="text" v-model="add_pid"/>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary" type="button" @click="addIdCard()">确认添加</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 20px">
                <div class="col-md-4 col-md-offset-4">
                    <input type="button" @click="submitGame();" class="btn btn-info btn-block" value="下一步">
                </div>
            </div>
        </form>

    </div>
    <script type="text/javascript">

        var authLock = false;
        var minSendCount = parseInt("{$group_auth.min_count}");
        var maxSendCount = parseInt("{$group_auth.max_count}");
        var projectID = parseInt("{:I('id')}");
        var sexCheck = parseInt("{$_game.g_sex}");
        //年龄限制
        var minAge = parseInt("{$_game.min_age}");
        var maxAge = parseInt("{$_game.max_age}");

        var vm = new Vue({
            el: '#zj-app',
            data: {
                users: [], tip: '请输入身份证号', add_pid: ''
            },
            created: function () {
                this.$data.users = [];
                var user = JSON.parse('{$user_json}');
                if (user.u_id == parseInt("{$_user.u_id}")) {
                    //alert(1);
                    this.$data.users.push(user);
                }
            },
            methods: {
                addRow: function () {
                    var user = {u_pid: ''};
                    this.$data.users.push(user);
                },
                removeRow: function (uid) {
                    if (uid == parseInt("{$_user.u_id}")) {
                        layer.msg("个人用户，必须存在其中");
                        return;
                    }
                    for (var i = 0; i < this.$data.users.length; i++) {
                        if (this.$data.users[i].u_id === uid) {
                            this.$data.users.splice(i, 1);
                            return;
                        }
                    }
                },
                addIdCard: function () {
                    var _self = this;
                    //判断当前人数
                    if (!this.$options.methods.checkUserCount()) {
                        return;
                    }
                    if (this.$data.users.length >= maxSendCount) {
                        layer.msg("本次比赛最多可以报名:" + maxSendCount + "人");
                        return;
                    }
                    var idcard = _self.$data.add_pid;

                    if (idcard.length < 18) {
                        layer.msg("身份证号码位数不对");
                        return;
                    }
                    var _users = _self.$data.users;
                    for (var i = 0; i < _users.length; i++) {
                        if (_users[i].u_pid === idcard) {
                            layer.msg("该用户已经在队列中了");
                            return;
                        }
                    }
                    $.post("{:U('Service/getUserMsg')}", {idCard: idcard}, function (ret) {
                        if (ret.status != 1) {
                            layer.msg(ret.info);
                            //进行操作
                            return;
                        }
                        //检查性别
                        if (sexCheck !== 0) {
                            if (sexCheck != ret.data.sex) {
                                layer.msg("对不起,本项目具有性别限制");
                                return;
                            }
                        }
                        //检查年龄
                        if (minAge > ret.u_age || maxAge < ret.u_age) {
                            layer.msg("对不起,本项目具有年龄限制");
                            return;
                        }
                        _self.$data.users.push(ret.data);
                    });
                },
                submitGame: function () {
                    if (!this.$options.methods.checkUserCount()) {
                        return;
                    }
                    if (window.confirm('确认提交么？') != true) {
                        return;
                    }
                    var formData = {'u_uid[]': [], id: projectID};
                    for (var i = 0; i < this.$data.users.length; i++) {
                        formData['u_uid[]'].push(this.$data.users[i].u_id);
                    }
                    console.log(formData);
                    $.post("{:U('Project/apply')}", formData, function (ret) {
                        layer.msg(ret.info);
                        if (ret.status == 1) {
                            window.location.href = ret.url;
                        } else {
                        }
                    });
                },
                checkUserCount: function () {
                    return true;
                }
            }
        })
    </script>
</block>